<template>
	<!-- 活动详情 -->
	<view class="pages-home" v-if="detail.id">

		<banner :list="bannerList" :margin="0" :autoplay="true" :height="562" :indicatorActiveColor="primaryColor">
		</banner>
		
		 <!-- :style="'background-image: url(' + detail.background_image + ');'" -->
		<view class="pd-lg">
			
			<image class="top-bg" mode="aspectFill" style="height: 100%; width: 100%;" :src="detail.background_image"></image>
			
			<view class="flex-y-baseline f-desc c-caption pt-sm pb-md">
				<view class="flex-y-baseline flex-1">
					<i class="iconfont money" :style="{color:primaryColor}"></i>
					<view class="f-desc c-title ml-sm mr-sm">{{detail.type == 1 ? '免费活动' : '征婚活动'}}</view>
					<view class="item-btn flex-center f-caption c-base radius" :style="{ background: primaryColor }">
						报名人数（ 0人 ）
					</view>
				</view>
				
			</view>
			
			<view class="flex-y-baseline flex-1 pb-md">
				<i class="iconfont iconjuli" :style="{color:primaryColor}"></i>
				<view class="f-desc c-title pl-sm pr-sm">{{detail.address}}</view>
			</view>
			<view class="flex-y-baseline flex-1">
				<i class="iconfont clock" :style="{color:primaryColor}"></i>
				<view class="f-desc c-title ml-sm mr-lg">6-22 8:30 至 6-22 12:00{{}}</view>
				<view class="item-btn flex-center f-caption c-base radius" :style="{ background: primaryColor }">
					<view class="flex-y-baseline flex-1 flex-center">
						<view @tap.stop="toQrcode" class="f-paragraph mr-lg">扫码</view>
						<view @tap.stop="sign" class="f-paragraph ml-lg">签到</view>
					</view>
				</view>
			</view>
			
			<view class="f-title c-title pt-lg pb-lg">活动内容：</view>
			<view class="f-paragraph c-paragraph pt-lg pb-lg">{{detail.content}}</view>
			
			<view v-if="detail.video_intro" class="f-title c-title pb-sm">视频介绍</view>
			<view v-if="detail.video_intro" class="flex-between pl-lg pr-lg pb-md">
				<upload :imagelist="detail.video_intro" filetype="video"
					imgtype="video" text="上传视频" :imgsize="1">
				</upload>
			</view>
			
			<view
				class="flex-y-end pb-md pl-md pr-md pd-lg radius-10"
				v-for="(item, index) in activity_photo" :key="index">
				<image mode="widthFix" class="radius-10" :src="item"></image>
			</view>
			
			<view @tap.stop="toNavigation" class="flex-center f-caption c-base radius" style="height: 66rpx; margin-bottom: 50rpx;" :style="{ background: primaryColor }">
				开始导航
			</view>
			
			<!-- <view
				class="user-item flex-y-end pb-md pl-md pr-md pd-lg"
				v-for="(item, index) in cy_user" :key="index">
				<view class="flex-y-center">
					<image mode="aspectFill" class="cover" :src="item.url"></image>
					<view style="margin-left: 10rpx;">{{item.mobile}}</view>
				</view>
			</view> -->
			
			<view class="user-list flex-y-end"
				v-for="(item, index) in user_list" :key="index">
				<view v-if="index == 0" class="flex-y-center" style="width: 100%;">
					<view style="width: 10%;" :style="{color:primaryColor}">序号</view>
					<view class="c-base" style="width: 14%;" :style="{color:primaryColor}">头像</view>
					<view style="width: 10%;" :style="{color:primaryColor}">性别</view>
					<!-- <view style="width: 14%;" :style="{color:primaryColor}">距离</view> -->
					<view style="width: 30%;" :style="{color:primaryColor}">时间</view>
					<view style="width: 18%;" :style="{color:primaryColor}">金额</view>
					<view style="width: 18%;" :style="{color:primaryColor}">电话</view>
				</view>
				<view v-if="index != 0" class="flex-y-center" style="width: 100%;">
					<view style="width: 10%;" :style="{color:primaryColor}">{{ 5 - index}}.</view>
					<view class="flex-center" style="width: 14%;">
						<image mode="aspectFill" class="cover" :src="item.userinfo.avatar"></image>
					</view>
					<view style="width: 10%;" :style="{color:primaryColor}">{{item.userinfo.sex == 1 ? '男' : '女'}}</view>
					<!-- <view style="width: 14%;" :style="{color:primaryColor}">{{item.distance}}</view> -->
					<view style="width: 30%;" :style="{color:primaryColor}">{{item.addtime}}</view>
					<view style="width: 18%;" :style="{color:primaryColor}">{{item.money}}</view>
					<i class="iconfont phone" v-if="userid==detail.uid" @click="callphone(item.userinfo.mobile)" style="width: 18%; font-size: 58rpx;" :style="{color:primaryColor}"></i>
				</view>
			</view>
			
			<view class="msg" style="margin-bottom: 0rpx;">
				<view class="f-title c-title pt-lg pb-lg" style="width: 100%;">温馨申明：</view>
				<view class="f-paragraph c-paragraph pb-lg" style="width: 100%;">
				1.平台搭建自由，自主，自愿的良好交友生态，进行资源对接，知识付费学习。任何个人私下与商业的合作与平台无关，平台也无权干涉。<br/>				2.如果不同意电话联系开放对接，用户可以关闭此项功能，平台如有人联系您，24小时内您未回复，系统将默认您同意联系对接！<br/>				3.此项电话联系功能多为自己储备资源，以备有事之需，多认名人朋友，自己多一次成功的机会。    送祝福。				{{}}</view>
			</view>
			
		</view>
		
		<!-- <view class="space-md" style="margin-bottom: 300rpx;"></view> -->

		<view class="space-max-footer"></view>
		<fix-bottom-button v-if="detail.is_bao ==0" @confirm="confirm"
			:text="[{type:'confirm',text:'立即报名'}]">
		</fix-bottom-button>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import $api from '@/api/index.js';
	export default {
		data() {
			return {
				options: {},
				bannerList: [],
				cy_user: [],
				user_list: [],
				activeIndex: 0,
				background_image: 'https://text.10-yuan.com/attachment/image/666/23/06/6837c876753f49c695154234caa31352.jpg',
				detail: {},
				video_intro: [],
				activity_photo: [],
				coins: [
					{
						title: "免费",
						url: "https://text.10-yuan.com/attachment/image/666/23/06/6837c876753f49c695154234caa31352.jpg"
					},
					{
						title: "￥9.9",
						url: "https://text.10-yuan.com/attachment/image/666/23/06/6837c876753f49c695154234caa31352.jpg"
					},
					{
						title: "￥29.9",
						url: "https://text.10-yuan.com/attachment/image/666/23/06/6837c876753f49c695154234caa31352.jpg"
					},
					{
						title: "￥99.9",
						url: "https://text.10-yuan.com/attachment/image/666/23/06/6837c876753f49c695154234caa31352.jpg"
					},
					{
						title: "￥199",
						url: "https://text.10-yuan.com/attachment/image/666/23/06/6837c876753f49c695154234caa31352.jpg"
					}
				],
				userid:0
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		onLoad(options) {
			this.$util.showLoading()
			this.options = options
			this.initIndex()
			let userinfo = uni.getStorageSync('userInfo')
			this.userid = userinfo.id
			this.setShareMenu();
		},
		onPullDownRefresh() {
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onShareAppMessage: function () {
		    // 构建分享的消息
		    let shareInfo = {
		      title: this.detail.content,
		      path: 'activity/pages/activity-info',
		      imageUrl: this.detail.activity_photo[0].imageurl // 分享卡片的图片，可选
		    }
		    // 返回分享的消息
		    return shareInfo;
		  },
		  onShareTimeline: function () {
		      // 构建分享的消息
		      let shareInfo = {
		        title: this.detail.content,
		        path: 'activity/pages/activity-info',
		        imageUrl: this.detail.activity_photo[0].imageurl // 分享卡片的图片，可选
		      }
		      // 返回分享的消息
		      return shareInfo;
		    },
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo']),
			...mapMutations(['getUserIndex']),
			async initIndex(refresh = false) {
				if (!this.configInfo.id || refresh) {
					await this.getConfigInfo()
				}
				await this.getDetail()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			onShareAppMessage: function () {
			    // 构建分享的消息
			    let shareInfo = {
			      title: this.detail.content,
			      path: 'activity/pages/activity-info',
			      imageUrl: this.detail.activity_photo[0].imageurl // 分享卡片的图片，可选
			    }
			    // 返回分享的消息
			    return shareInfo;
			  },
			setShareMenu() {
			  // 判断是否为微信小程序环境
			  if (typeof wx !== 'undefined' && wx.updateShareMenu) {
				wx.updateShareMenu({
					withShareTicket: true,
					  // 设置分享到朋友圈的菜单项
					menus: ['shareAppMessage', 'shareTimeline'], 
					  // 自定义分享内容
					title: this.detail.content,
					path: 'activity/pages/activity-info',
					imageUrl: this.detail.background_image, // 分享卡片的图片，可选
					description: '自定义分享描述',
				});
			  }
			},
			initRefresh() {
				this.initIndex(true)
			},
			async getDetail() {
				let {
					activit_id
				} = this.options
				this.detail = await this.$api.user.getActivitydetails({
					activit_id
				});
				if(this.detail.video_intro){
					this.detail.video_intro = [{path: this.detail.video_intro}]
				}
				for (var i = 0; i < this.detail.activity_photo.length && i < 1; i++) {
					this.bannerList.push(this.detail.activity_photo[i].imageurl)
				}
				
				// debugger
				for (var i = 1; i < this.detail.activity_photo.length; i++) {
					this.activity_photo.push(this.detail.activity_photo[i].imageurl)
				}
				this.cy_user = this.detail.cy_user
				this.user_list = this.detail.user_list
				
				this.$util.hideAll()
			},
			handerTabChange(index) {
				this.activeIndex = index;
			},
			async confirm(){
				let res = await this.$api.user.enrollactiv({
					activit_id:this.detail.id
				})
				
				if(this.detail.money == "0" ||this.detail.money == 0)
				{
					uni.showToast({
						title:"报名成功"
					})
					return 
				}else{
					await this.$util.pay(res)
				}
			},
			//导航--传终点的坐标即可
			toNavigation(item) {
				//根据终点地址调起地图导航
				uni.openLocation({
					longitude: parseFloat(this.detail.lng),// 经度，范围为-180~180，负数表示西经
					latitude: parseFloat(this.detail.lat),// 纬度，范围为-90~90，负数表示南纬
					scale: 28, // 缩放比例
					name:this.detail.name,//终点名称
					address:this.detail.address,//终点详细地址
					success: function (res) {
						console.log('success:',res);
					}
				});
			},
			toQrcode() {
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			sign(){
				
			},
			callphone(phone){
				uni.makePhoneCall({
				    phoneNumber: phone // 这里填入你想要拨打的电话号码  
				});
			}
			
		}
	}
</script>

<style lang="scss">
	.pages-home {
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		.top-bg{
		    position: fixed;
		    width: 100%;
		    height: 100%;
		    top: 0rpx;
		    left: 0;
		    z-index: -1;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
		}
		
		.item-btn {
			height: 54rpx;
			padding-left: 15rpx;
			padding-right: 15rpx;
		}
		.total-box {
			width: 100%;
			height: 84rpx;
			.box-btn {
				margin: 0;
				padding: 0;
				margin-right: 2rpx;
				height: 62rpx;
				display: flex;
				align-items: center;
				background-color: #e4e4e4;
				border-radius: 42rpx;
				line-height: 1.5;
				border-color: #000;
				border-width: 2rpx;
				text-align: left;
				color: #333;
			}
			.box-btn2 {
				margin: 0;
				padding: 0;
				margin-right: 2rpx;
				height: 62rpx;
				display: flex;
				align-items: center;
				background-color: #bccfde;
				border-radius: 42rpx;
				line-height: 1.5;
				border-color: #000;
				border-width: 2rpx;
				text-align: left;
				color: #333;
			}
		}
	
		.user-item {
			float: left;
			box-sizing: border-box;
			width: 44%;
			text-align: center;
			height: 100rpx;
			// padding: 10px 6px;
			
			.cover {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50rpx;
			}
		}
		
		.user-list {
			float: left;
			box-sizing: border-box;
			width: 100%;
			text-align: center;
			height: 100rpx;
			// padding: 10px 6px;
			
			.cover {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50rpx;
			}
		}
		
		.msg {
			float: left;
			box-sizing: border-box;
			width: 100%;
			padding-bottom: 120rpx;
		}
	
	
	}
</style>
